<div class="content-heading">
    <!-- Breadcrumb right aligned-->
    <ul class="breadcrumb pull-right">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Elements</a>
        </li>
        <li class="active">Notifications</li>
    </ul>Notifications
    <!-- Small text for title-->
    <span class="text-sm hidden-xs">A complete set of notification posibilities</span>
    <!-- Breadcrumb below title-->
    <ul class="breadcrumb">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Elements</a>
        </li>
        <li class="active">Notifications</li>
    </ul>
</div>
<!-- Breadcrumb next to view title-->
<ul class="breadcrumb">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Elements</a>
    </li>
    <li class="active">Notifications</li>
</ul>
<ul class="breadcrumb">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Elements</a>
    </li>
    <li class="active">Notifications</li>
</ul>
<div class="panel panel-default">
    <div class="panel-heading">Toaster notifications for Angular</div>
    <div class="panel-body">
        <toaster-container [toasterconfig]="toasterconfig"></toaster-container>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label>Title</label>
                    <input class="form-control" type="text" placeholder="Enter a title..." [(ngModel)]="toaster.title" />
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <textarea class="form-control" placeholder="Enter a message" rows="5" [(ngModel)]="toaster.text"></textarea>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-md-6">
                        <!-- icon-classes: .toast-error,.toast-info,.toast-wait,.toast-success,.toast-warning-->
                        <label>Toast Type</label>
                        <div class="radio c-radio">
                            <label>
                                <input type="radio" name="toasts" [(ngModel)]="toaster.type" value="success" />
                                <span class="fa fa-circle"></span>Success</label>
                        </div>
                        <div class="radio c-radio">
                            <label>
                                <input type="radio" name="toasts" [(ngModel)]="toaster.type" value="info" />
                                <span class="fa fa-circle"></span>Info</label>
                        </div>
                        <div class="radio c-radio">
                            <label>
                                <input type="radio" name="toasts" [(ngModel)]="toaster.type" value="wait" />
                                <span class="fa fa-circle"></span>Wait</label>
                        </div>
                        <div class="radio c-radio">
                            <label>
                                <input type="radio" name="toasts" [(ngModel)]="toaster.type" value="warning" />
                                <span class="fa fa-circle"></span>Warning</label>
                        </div>
                        <div class="radio c-radio">
                            <label>
                                <input type="radio" name="toasts" [(ngModel)]="toaster.type" value="error" />
                                <span class="fa fa-circle"></span>Error</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-info" (click)="pop()">Show a Toaster</button>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">Alert Styles</div>
            <div class="panel-body">
                <alert type="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a class="alert-link" href="#">Alert Link</a>
                </alert>
                <alert type="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a class="alert-link" href="#">Alert Link</a>
                </alert>
                <div>
                    <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
                        {{ alert?.msg }}
                    </alert>
                    <button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</button>
                </div>
            </div>
        </div>
        <!-- END panel-->
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">Progress Bar
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-xs btn-primary" (click)="randomStacked()">Stacked</button>
                    <button type="button" class="btn btn-xs btn-primary" (click)="random()">Randomize</button>
                </div>
            </div>
            <div class="panel-body">
                <h4>Static</h4>
                <div class="row">
                    <div class="col-sm-4">
                        <progressbar value="55"></progressbar>
                    </div>
                    <div class="col-sm-4">
                        <progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
                    </div>
                    <div class="col-sm-4">
                        <progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar>
                    </div>
                </div>
                <h4>Dynamic</h4>
                <progressbar [max]="max" [value]="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
                </progressbar>
                <small><em>No animation</em></small>
                <progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
                <small><em>Object (changes type based on value)</em></small>
                <progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}} <i *ngIf="showWarning">!!! Watch out !!!</i></progressbar>
                <h4>Stacked</h4>
                <bs-progress>
                    <bar *ngFor="let baz of stacked" [value]="baz.value" [type]="baz?.type">
                        <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
                    </bar>
                </bs-progress>
            </div>
        </div>
        <!-- END panel-->

    </div>
    <div class="col-lg-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">Modals</div>
            <div class="panel-body">
                <!-- CLassic modal -->
                <button type="button" class="btn btn-primary" (click)="classicModal.show()">Classc modal</button>
                <!-- Small modal -->
                <button type="button" class="btn btn-primary" (click)="smModal.show()">Small modal</button>
                <!-- Small modal -->
                <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" aria-label="Close" (click)="smModal.hide()">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title">Small modal</h4>
                            </div>
                            <div class="modal-body">
                                ...
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Classc modal -->
                <div class="modal fade" bsModal #classicModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" aria-label="Close" (click)="classicModal.hide()">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title">Classic modal</h4>
                            </div>
                            <div class="modal-body">
                                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel-->
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">Ratings</div>
            <div class="panel-body">
                <h4>Default</h4>
                <rating [(ngModel)]="rate" [max]="maxRat" [readonly]="isReadonly"
                        (onHover)="hoveringOver($event)" (onLeave)="resetStar()" [titles]="['one','two','three']"
                        stateOn="fa fa-star text-yellow" stateOff="fa fa-star-o"></rating>
                <span class="label" [ngClass]="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" [ngStyle]="{display: (overStar && !isReadonly) ? 'inline' : 'none'}">{{percent}}%</span>
                <pre class="card card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
                <button type="button" class="btn btn-sm btn-danger" (click)="rate = 0" [disabled]="isReadonly">Clear
                </button>
                <button type="button" class="btn btn-sm btn-primary" (click)="isReadonly = ! isReadonly">Toggle Readonly
                </button>
                <hr/>
                <h4>Custom icons</h4>
                <div>
                    <rating [(ngModel)]="x" max="15" stateOn="fa fa-tree text-success" stateOff="fa fa-tree"></rating>
                    <b>(<i>Rate:</i> {{x}})</b>
                </div>
                <div>
                    <rating [(ngModel)]="y" [ratingStates]="ratingStates"></rating>
                    <b>(<i>Rate:</i> {{y}})</b>
                </div>
            </div>
        </div>
        <!-- END panel-->
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">Tooltips</div>
            <div class="panel-body">
                <div class="form-group">
                    <label>Dynamic Tooltip Text</label>
                    <input type="text" [(ngModel)]="dynamicTooltipText" class="form-control">
                </div>
                <div class="form-group">
                    <label>Dynamic Tooltip Popup Text</label>
                    <input type="text" [(ngModel)]="dynamicTooltip" class="form-control">
                </div>
                <p>
                    Pellentesque <a href="#" [tooltip]="dynamicTooltip">{{dynamicTooltipText}}</a>, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at
                    <a href="#" placement="left" tooltip="On the Left!">left</a> eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
                    <a href="#" placement="right" tooltip="On the Right!">right</a> nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
                    <a href="#" placement="bottom" tooltip="On the Bottom!">bottom</a> pharetra convallis posuere morbi leo urna,
                    <a href="#" [tooltipAnimation]="false" tooltip="I don't fade. :-(">fading</a> at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
                    <a href="#" tooltipPopupDelay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut. nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
                </p>
                <p>
                    I can even contain HTML. <a href="#" [tooltip]="htmlTooltip" (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
                </p>
                <ng-template #toolTipTemplate let-model="model">
                    <h4>Tool tip custom content defined inside a template</h4>
                    <h5>With context binding: {{model.text}}</h5>
                </ng-template>
                <p>
                    Or use a TemplateRef. <a href="#" [tooltip]="toolTipTemplate">Check me out!</a>
                </p>
                <p>
                    Programatically show/hide tooltip
                    <a href="#" [tooltip]="'Foo'" (tooltipStateChanged)="tooltipStateChanged($event)" #tooltip="bs-tooltip">Check me out!</a>
                    <button class="btn btn-sm btn-primary" (click)="tooltip.show()">Show tooltip</button>
                    <button class="btn btn-sm btn-danger" (click)="tooltip.hide()">Hide tooltip</button>
                </p>
                <p>
                    I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!">Check me out!</a>
                </p>
                <form role="form">
                    <div class="form-group">
                        <label>Or use custom triggers, like focus: </label>
                        <input type="text" name="clickMe" value="Click me!" tooltip="See? Now click away..." triggers="focus" placement="right" class="form-control" />
                    </div>
                </form>
            </div>
        </div>
        <!-- END panel-->
    </div>
</div>
